<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./js/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./js/bootstrap/css/icons/bootstrap-icons.min.css">
  <link rel="stylesheet" href="./js/swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js//swiper/swiper-bundle.min.js"></script>
  <script src="./js/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <header class="animate__animated animate__fadeInDown">
    <div class="header-main container">
      <a href="index.html" class="logo">
        <img src="./resoures/images/logo.png" alt="logo">
      </a>
      <nav>
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="info.html">Info</a></li>
        </ul>
      </nav>
      <div class="dropdown">
        <div class="lang" href="#" data-toggle="dropdown" aria-expanded="false">
          <i class="bi bi-globe-asia-australia"></i>
        </div>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">简体中文</a>
          <a class="dropdown-item" href="#">English</a>
        </div>
      </div>
    </div>
  </header>
  <div class="banner-container">
    <div class="banner container">
      <div class="text-info wow animate__animated animate__fadeInLeft">
        <h1>Make The Easiest Solution For You</h1>
        <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat
          <br> quisque eget congue velit in cursus leo Sed sodales
        </p>
      </div>
      <div class="wow animate__animated animate__backInRight">
        <img src="./resoures/images/banner.png" alt="">
      </div>
    </div>
    <div class="banner-bg">
      <img class="banner_bg_animation" src="./resoures/images/banner_bg.png" alt="bg-image">
    </div>
  </div>
  <div class="swiper-container wow animate__animated animate__zoomIn">
    <div class="swiper swiperDom container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="image-box">
            <img src="./resoures/images/swiper.png" alt="">
          </div>
          <div class="deivce-info">
            <h2>Make The Easiest Solution For You1</h2>
            <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat
              <br> quisque eget congue velit in cursus leo Sed sodales
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="image-box">
            <img src="./resoures/images/swiper.png" alt="">
          </div>
          <div class="deivce-info">
            <h2>Make The Easiest Solution For You2</h2>
            <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat
              <br> quisque eget congue velit in cursus leo Sed sodales
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="image-box">
            <img src="./resoures/images/swiper.png" alt="">
          </div>
          <div class="deivce-info">
            <h2>Make The Easiest Solution For You3</h2>
            <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat
              <br> quisque eget congue velit in cursus leo Sed sodales
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="image-box">
            <img src="./resoures/images/swiper.png" alt="">
          </div>
          <div class="deivce-info">
            <h2>Make The Easiest Solution For You4</h2>
            <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat
              <br> quisque eget congue velit in cursus leo Sed sodales
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="image-box">
            <img src="./resoures/images/swiper.png" alt="">
          </div>
          <div class="deivce-info">
            <h2>Make The Easiest Solution For You5</h2>
            <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat
              <br> quisque eget congue velit in cursus leo Sed sodales
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="image-box">
            <img src="./resoures/images/swiper.png" alt="">
          </div>
          <div class="deivce-info">
            <h2>Make The Easiest Solution For You6</h2>
            <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat
              <br> quisque eget congue velit in cursus leo Sed sodales
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="image-box">
            <img src="./resoures/images/swiper.png" alt="">
          </div>
          <div class="deivce-info">
            <h2>Make The Easiest Solution For You7</h2>
            <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat
              <br> quisque eget congue velit in cursus leo Sed sodales
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="image-box">
            <img src="./resoures/images/swiper.png" alt="">
          </div>
          <div class="deivce-info">
            <h2>Make The Easiest Solution For You8</h2>
            <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat
              <br> quisque eget congue velit in cursus leo Sed sodales
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <div class="list-container">
    <div class="show-list container">
      <div class="search-form">
        <ul class="search-form-check">
          <li>all</li>
          <li>type1</li>
          <li>type2</li>
          <li>type3</li>
        </ul>
        <div class="search-form-select">
          <select class="form-control">
            <option>sort1</option>
            <option>sort2</option>
            <option>sort3</option>
            <option>sort4</option>
            <option>sort5</option>
          </select>
        </div>
      </div>
      <ul class="list-box wow animate__animated animate__fadeIn">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="page-icon">
        <span><i class="bi bi-arrow-left"></i></span>
        <span><i class="bi bi-arrow-right"></i></span>
      </div>
    </div>

  </div>
  <footer>
    <div class="footer-container container">
      <div class="logo">
        <a href="index.html"  class="wow animate__animated animate__fadeInLeftBig">
          <img src="./resoures/images/logo.png" alt="logo">
        </a>
      </div>
      <ul class="wow animate__animated animate__fadeInLeftBig">
        <li>
          <h2>title</h2>
          <p>text</p>
          <p>text</p>
          <p>text</p>
        </li>
        <li>
          <h2>title</h2>
          <p>text</p>
          <p>text</p>
          <p>text</p>
        </li>
      </ul>
      <div class="brand-logo wow animate__animated animate__backInUp">
        <a href="#">
          <img src="./resoures/images/tuite.png" alt="">
        </a>
        <a href="#">
          <img src="./resoures/images/tuite.png" alt="">
        </a>
        <a href="#">
          <img src="./resoures/images/tuite.png" alt="">
        </a>
      </div>
    </div>

  </footer>
  <script src="./js/wow.min.js"></script>
  <script>
    var swiper = new Swiper(".swiperDom", {
      slidesPerView: 3,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        // type: "progressbar",
        clickable: true,
      },
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    new WOW().init();
  </script>
</body>

</html>